import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { videos } from '../data/videos';
import { ArrowLeft, Eye, Calendar } from 'lucide-react';
import { VideoCard } from '../components/VideoCard';

export function VideoPage() {
  const { id } = useParams();
  const video = videos.find(v => v.id === id);

  if (!video) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold mb-4">视频未找到</h2>
          <Link to="/" className="text-blue-600 hover:text-blue-800">
            返回首页
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Video Player Section */}
      <div className="bg-black">
        <div className="max-w-7xl mx-auto">
          <div className="aspect-w-16 aspect-h-9">
            <video
              className="w-full h-full object-contain"
              controls
              autoPlay
              src={video.videoUrl}
            />
          </div>
        </div>
      </div>

      {/* Video Info Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Link to="/" className="inline-flex items-center text-gray-600 hover:text-gray-900 mb-6">
          <ArrowLeft className="mr-2" size={20} />
          返回首页
        </Link>

        <div className="bg-white rounded-lg shadow-sm p-6">
          <h1 className="text-2xl font-bold mb-4">{video.title}</h1>
          
          <div className="flex items-center gap-6 text-gray-600 mb-6">
            <div className="flex items-center">
              <Eye className="mr-2" size={20} />
              <span>{video.views.toLocaleString()} 次观看</span>
            </div>
            <div className="flex items-center">
              <Calendar className="mr-2" size={20} />
              <span>{video.uploadDate}</span>
            </div>
          </div>

          <div className="border-t pt-6">
            <h2 className="text-lg font-semibold mb-2">视频简介</h2>
            <p className="text-gray-600 whitespace-pre-line">{video.description}</p>
          </div>
        </div>

        {/* Related Videos */}
        <div className="mt-8">
          <h2 className="text-xl font-bold mb-4">相关视频</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {videos
              .filter(v => v.id !== video.id && v.category === video.category)
              .slice(0, 3)
              .map(relatedVideo => (
                <VideoCard key={relatedVideo.id} video={relatedVideo} />
              ))}
          </div>
        </div>
      </div>
    </div>
  );
}